import 'ol/ol.css'
// import Map from 'ol/Map.js'
// import View from 'ol/View'
// import TileLayer from 'ol/layer/Tile'
// import XYZ from "ol/source/XYZ"
import { fromLonLat } from 'ol/proj'  // OpenLayers的投影转换函数，用于经纬度坐标和投影坐标之间的转换

import Feature from 'ol/Feature'  // OpenLayers的要素类，表示地图上的一个对象或实体
import Point from 'ol/geom/Point'  // OpenLayers的点几何类，用于表示点状的地理数据
// import LineString from 'ol/geom/LineString'  // OpenLayers的线几何类，用于表示线状的地理数据
// import Polygon from "ol/geom/Polygon"  // OpenLayers的多边形几何类，用于表示面状的地理数据

import { Vector as VectorLayer } from 'ol/layer'  // OpenLayers的矢量图层类，用于显示矢量数据
import { Vector as VectorSource } from 'ol/source'  // OpenLayers的矢量数据源类，用于管理和提供矢量数据
import { Style, Icon, Stroke, Circle as CircleStyle } from "ol/style"  // OpenLayers的样式类，用于定义图层的样式，包括圆形样式、基本样式、边框、填充和图标

import LineString from 'ol/geom/LineString';

// 飞机模型及样式(飞机模子)
const planeStyle = new Style({
  image: new Icon({
    anchor: [0.5, 0.5],
    src: "data/flight.svg",
    scale: 0.15,
    // rotation: -Math.PI / 2 // 设置飞机的角度
  })
})

class Plane {
  planeArr:Array<any> = [] // 飞机要素数组
  planeArrSource:any // 飞机要素源
  planeLayer:any // 飞机要素源组成的图层

  planeLine:any // 某个飞机的回放路线，根据案例网站一次展示一个飞机的回放路线
  planeLineSource:any
  planeLineLayer:any

  // 首次添加飞机
  addFirstTimePlane (id:string, position:any) {
    const iconFeature = new Feature({
      geometry: new Point(fromLonLat(position)),
      name: id,
      type: 'plane'
    })
    iconFeature.setStyle(planeStyle)
    this.planeArr.push(iconFeature)
  }

  // 非首次添加飞机
  addPlane (id:string, position:any) {
    const iconFeature = new Feature({
      geometry: new Point(fromLonLat(position)),
      name: id,
      type: 'plane'
    })
    iconFeature.setStyle(planeStyle)
    this.planeArr.push(iconFeature)
    this.planeLayer.getSource().addFeature(iconFeature)
  }

  // 将添加飞机集合成源
  setSouce () {
    this.planeArrSource = new VectorSource({
      features: this.planeArr
    })
  }

  // 将源合成形
  setLayer () {
    this.planeLayer = new VectorLayer({
      source: this.planeArrSource
    })
  }

  // 更新飞机的状态(位置及朝向)
  updatePlane (id:any, p:any) {
    const index = this.planeArr.findIndex((i:any) => {
      return i.get('name') === id
    })
    if (index !== -1) {
      // 更新朝向
      this.updateToward(index, p)
      // 更新位置
      this.planeArr[index].setGeometry(new Point(fromLonLat(p)))
    }
  }
  // 更新朝向
  updateToward (index:any, p:any) {
    const from = this.planeArr[index].getGeometry().flatCoordinates
    const to = fromLonLat(p)
    const r = - (this.computeToward(from, to) - Math.PI / 2)

    // console.log(r)

    const oldStyle = this.planeArr[index].getStyle()
    if (oldStyle) {
      const newStyle = oldStyle.clone()
      const icon = newStyle.getImage()
      if (icon) {
        icon.setRotation(r)
        this.planeArr[index].setStyle(newStyle)
      }
    }
  }
  // 计算朝向
  computeToward (from:any, to:any) {
    // console.log(from)
    const dx = to[0] - from[0]
    const dy = to[1] - from[1]
    return Math.atan2(dy, dx)
  }

  // 删除飞机
  delPlane (id:any) {
    const index = this.planeArr.findIndex((i:any) => {
      return i.get('name') === id
    })
    if (index !== -1) {
      const source = this.planeLayer.getSource()
      source?.removeFeature(this.planeArr[index])
      this.planeArr.splice(index, 1)
    }
  }

  // 添加飞机回放路线
  addPlaneLine (pointsInfo:any) {
    const points = pointsInfo.map((i:any) => {
      return fromLonLat(i)
    })

    // 创建线的要素
    const lineString = new LineString(points)
    this.planeLine = new Feature({
      type: 'line',
      geometry: lineString
    });

    // 创建矢量源并添加要素
    this.planeArrSource = new VectorSource({
      features: [this.planeLine]
    });

    // 创建矢量层并添加到地图
    this.planeLineLayer = new VectorLayer({
      source: this.planeArrSource,
      style: new Style({
        stroke: new Stroke({
          width: 2,
          color: [255, 0, 0, 1]
        }),
        image: new CircleStyle({
          radius: 5,
          stroke: new Stroke({ color: [0, 0, 255, 1], width: 2 })
        })
      })
    });
  }
  // 更新路线
  updatePlaneLine (point:any) {
    const points = this.planeLine.getGeometry().getCoordinates()

    if (points && points.length) {
      points.push(fromLonLat(point))
      this.planeLine.getGeometry().setCoordinates(points)
    }
  }
}

export default Plane